import GraphVertex from '../res/data-structures/graph/GraphVertex.js';
import GraphEdge from '../res/data-structures/graph/GraphEdge.js';
import Graph from '../res/data-structures/graph/Graph.js';
import dijkstra from '../res/graph/dijkstra/dijkstra.js';
//样图数据
let exampleGraph=[
    {
       "nodeNum":9,
       "nodeLocation":[
           {
               x:50,y:50
           },
           {
               x:0,y:0
           },
           {
               x:40,y:25
           },
           {
               x:20,y:25
           },
           {
               x:50,y:0
           },
           {
               x:0,y:50
           },
           {
               x:40,y:85
           },
           {
               x:70,y:50
           },
           {
               x:100,y:50
           }
       ],
       "edgeList":[
            {
                "source":0,
                "target":5,
                "value":8
            },
            {
                "source":0,
                "target":2,
                "value":2
            },
            {
                "source":0,
                "target":7,
                "value":2
            },
            {
                "source":0,
                "target":4,
                "value":3
            },
            {
                "source":1,
                "target":5,
                "value":9
            },
            {
                "source":1,
                "target":4,
                "value":13
            },
            {
                "source":4,
                "target":7,
                "value":4
            },
            {
                "source":4,
                "target":8,
                "value":5
            },
            {
                "source":3,
                "target":5,
                "value":5
            },
            {
                "source":3,
                "target":2,
                "value":4
            },
            {
                "source":5,
                "target":6,
                "value":5
            },
            {
                "source":6,
                "target":7,
                "value":9
            },
            {
                "source":6,
                "target":8,
                "value":10
            },
            {
                "source":7,
                "target":8,
                "value":5
            }
        ] 
    },
    {
       "nodeNum":9,
       "nodeLocation":[
           {
               x:0,y:50
           },
           {
               x:40,y:15
           },
           {
               x:80,y:15
           },
           {
               x:120,y:15
           },
           {
               x:160,y:50
           },
           {
               x:120,y:85
           },
           {
               x:80,y:85
           },
           {
               x:40,y:85
           },
           {
               x:80,y:50
           }
       ],
       "edgeList":[
            {
                "source":0,
                "target":1,
                "value":4
            },
            {
                "source":0,
                "target":7,
                "value":8
            },
            {
                "source":1,
                "target":7,
                "value":11
            },
            {
                "source":1,
                "target":2,
                "value":8
            },
            {
                "source":7,
                "target":8,
                "value":7
            },
            {
                "source":6,
                "target":7,
                "value":1
            },
            {
                "source":2,
                "target":8,
                "value":2
            },
            {
                "source":6,
                "target":8,
                "value":6
            },
            {
                "source":5,
                "target":6,
                "value":2
            },
            {
                "source":2,
                "target":5,
                "value":4
            },
            {
                "source":2,
                "target":3,
                "value":7
            },
            {
                "source":3,
                "target":5,
                "value":14
            },
            {
                "source":3,
                "target":4,
                "value":9
            },
            {
                "source":4,
                "target":5,
                "value":10
            }
        ] 
    },
    {
       "nodeNum":7,
       "nodeLocation":[
           {
               x:10,y:10
           },
           {
               x:50,y:25
           },
           {
               x:90,y:10
           },
           {
               x:10,y:50
           },
           {
               x:80,y:50
           },
           {
               x:50,y:75
           },
           {
               x:90,y:75
           }
       ],
       "edgeList":[
            {
                "source":0,
                "target":1,
                "value":7
            },
            {
                "source":0,
                "target":3,
                "value":4
            },
            {
                "source":1,
                "target":3,
                "value":9
            },
            {
                "source":1,
                "target":2,
                "value":11
            },
            {
                "source":1,
                "target":4,
                "value":10
            },
            {
                "source":2,
                "target":4,
                "value":5
            },
            {
                "source":3,
                "target":4,
                "value":15
            },
            {
                "source":3,
                "target":5,
                "value":6
            },
            {
                "source":4,
                "target":5,
                "value":12
            },
            {
                "source":4,
                "target":6,
                "value":8
            },
            {
                "source":5,
                "target":6,
                "value":13
            }
        ] 
    },
    {
       "nodeNum":8,
       "nodeLocation":[
            {x:10,y:50},{x:30,y:30},{x:30,y:70},{x:60,y:50},{x:70,y:-10},{x:95,y:35},{x:95,y:65},{x:70,y:110}
       ],
       "edgeList":[
            {
                "source":0,
                "target":1,
                "value":4
            },
            {
                "source":0,
                "target":2,
                "value":3
            },
            {
                "source":1,
                "target":2,
                "value":5
            },
            {
                "source":1,
                "target":4,
                "value":9
            },
            {
                "source":1,
                "target":3,
                "value":5
            },
            {
                "source":2,
                "target":3,
                "value":5
            },
            {
                "source":2,
                "target":7,
                "value":5
            },
            {
                "source":3,
                "target":4,
                "value":7
            },
            {
                "source":3,
                "target":5,
                "value":6
            },
            {
                "source":3,
                "target":6,
                "value":5
            },
            {
                "source":3,
                "target":7,
                "value":4
            },
            {
                "source":4,
                "target":5,
                "value":3
            },
            {
                "source":5,
                "target":6,
                "value":2
            },
            {
                "source":6,
                "target":7,
                "value":6
            }
        ]  
    },
    {
       "nodeNum":6,
       "nodeLocation":[
            {x:50,y:0},{x:100,y:40},{x:85,y:100},{x:15,y:100},{x:0,y:40},{x:50,y:50}
       ],
       "edgeList":[
            {
                "source":0,
                "target":1,
                "value":14
            },
            {
                "source":0,
                "target":4,
                "value":22
            },
            {
                "source":0,
                "target":5,
                "value":13
            },
            {
                "source":1,
                "target":2,
                "value":21
            },
            {
                "source":1,
                "target":5,
                "value":12
            },
            {
                "source":2,
                "target":5,
                "value":18
            },
            {
                "source":2,
                "target":3,
                "value":16
            },
            {
                "source":3,
                "target":4,
                "value":20
            },
            {
                "source":3,
                "target":5,
                "value":19
            },
            {
                "source":4,
                "target":5,
                "value":24
            },

       ]
    },
    {
       "nodeNum":11,
       "nodeLocation":[
            {x:0,y:50},{x:25,y:20},{x:50,y:20},{x:75,y:20},{x:75,y:50},{x:50,y:50},
            {x:25,y:50},{x:25,y:80},{x:50,y:80},{x:75,y:80},{x:100,y:50}
       ],
       "edgeList":[
            {
                "source":0,
                "target":1,
                "value":8
            },
            {
                "source":0,
                "target":7,
                "value":8
            },
            {
                "source":0,
                "target":6,
                "value":7
            },
            {
                "source":1,
                "target":2,
                "value":3
            },
            {
                "source":2,
                "target":3,
                "value":5
            },
            {
                "source":2,
                "target":6,
                "value":5
            },
            {
                "source":2,
                "target":4,
                "value":6
            },
            {
                "source":3,
                "target":4,
                "value":1
            },
            {
                "source":3,
                "target":10,
                "value":12
            },
            {
                "source":4,
                "target":10,
                "value":10
            },
            {
                "source":4,
                "target":5,
                "value":2
            },
            {
                "source":4,
                "target":8,
                "value":7
            },
            {
                "source":5,
                "target":6,
                "value":9
            },
            {
                "source":5,
                "target":8,
                "value":3
            },
            {
                "source":7,
                "target":8,
                "value":9
            },
            {
                "source":8,
                "target":9,
                "value":2
            },
            {
                "source":9,
                "target":10,
                "value":2
            }
       ]
    },
    {
       "nodeNum":8,
       "nodeLocation":[
            {x:0,y:50},{x:20,y:25},{x:20,y:75},{x:50,y:50},
            {x:80,y:15},{x:120,y:30},{x:120,y:70},{x:80,y:85}
       ],
       "edgeList":[
            {
                "source":0,
                "target":1,
                "value":4
            },
            {
                "source":0,
                "target":2,
                "value":3
            },
            {
                "source":1,
                "target":2,
                "value":5
            },
            {
                "source":1,
                "target":3,
                "value":5
            },
            {
                "source":1,
                "target":4,
                "value":9
            },
            {
                "source":2,
                "target":3,
                "value":5
            },
            {
                "source":2,
                "target":7,
                "value":5
            },
            {
                "source":3,
                "target":4,
                "value":7
            },
            {
                "source":3,
                "target":5,
                "value":6
            },
            {
                "source":3,
                "target":6,
                "value":5
            },
            {
                "source":3,
                "target":7,
                "value":4
            },
            {
                "source":4,
                "target":5,
                "value":3
            },
            {
                "source":5,
                "target":6,
                "value":2
            },
            {
                "source":6,
                "target":7,
                "value":6
            },
       ]  
    },
    {
       "nodeNum":8,
       "nodeLocation":[
            {x:50,y:0},{x:0,y:25},{x:0,y:75},{x:50,y:50},
            {x:100,y:25},{x:50,y:100},{x:100,y:75},{x:150,y:50}
       ],
       "edgeList":[
            {
                "source":0,
                "target":1,
                "value":6
            },
            {
                "source":0,
                "target":4,
                "value":6
            },
            {
                "source":0,
                "target":3,
                "value":4
            },
            {
                "source":1,
                "target":2,
                "value":2
            },
            {
                "source":1,
                "target":3,
                "value":5
            },
            {
                "source":2,
                "target":3,
                "value":6
            },
            {
                "source":2,
                "target":5,
                "value":4
            },
            {
                "source":3,
                "target":4,
                "value":8
            },
            {
                "source":3,
                "target":5,
                "value":9
            },
            {
                "source":3,
                "target":6,
                "value":7
            },
            {
                "source":4,
                "target":6,
                "value":2
            },
            {
                "source":4,
                "target":7,
                "value":3
            },
            {
                "source":5,
                "target":6,
                "value":5
            },
            {
                "source":6,
                "target":7,
                "value":7
            }
       ]  
    }
];
function getOption(graphInfo){
//给节点设置样式
    let nodes=graphInfo['nodes'];
    let links=graphInfo['links'];
    let title=graphInfo['title'];
    //console.log(links);
//设置option样式
    return {
        title: {
            text: title,
            left: 'center',
            textStyle:{
                fontSize:20
            },
            bottom:0
        },
        tooltip: {
            trigger: 'item'
        },
        backgroundColor:'white',
        roam: true,
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbol: "circle",
                edgeSymbol:['none', 'none'],
                symbolSize: 40,
                edgeSymbolSize: 10,
                nodes: nodes,
                links: links,
                label: {
                    normal: {
                        show: true
                    }
                },
                draggable:true
            }
        ]
    };
}
function nodeStyle(title,x,y){
   return  { 
       name: title,
       x:x,y:y,
       itemStyle: {borderColor: 'black',color:'white',borderWidth: 3},
       label:{
           show:true,position:"inside",
           fontSize:15,color:'black',
           fontWeight:'bold'
        }
    }
}
function edgeStyle(selectNode,value){
    matrix[selectNode[0]][selectNode[1]]=value;
    matrix[selectNode[1]][selectNode[0]]=value;
    return {
        source: selectNode[0],
        target: selectNode[1],
        value:value,
        lineStyle: {
            width: 5,
            color: '#000',
            type:'solid',
            opacity:0.8,
            ignoreForceLayout:true
        },
        label:{
             show:true,
             formatter:'{c}',
             fontSize:15
        }
    };
}
function getLetter(num){
    let nodeTitle=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
    let str="";
    for(let j=0;j<=parseInt(num/26);j++){
            str+=nodeTitle[num-parseInt(num/26)*26];
    }
    return str;
}
//获取节点
function getNodes(Num,nodeLocation){
    let nodes=[];
    console.log(nodeLocation[0].x);
    let nodeTitle=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
    for(let i=0;i< Num;i++){
        let str="";
        for(let j=0;j<=parseInt(i/26);j++){
            str+=nodeTitle[i-parseInt(i/26)*26];
        }
        nodes.push(nodeStyle(str,nodeLocation[i].x,nodeLocation[i].y));
        matrix[i]=[];
        for(let k=0;k<Num;k++){
            matrix[i][k]=100000;
        }
    }
    return nodes;
}
//导入边
function getLoadLinks(){
   let links1=[];
   let edgeList=graphItem.edgeList;
   let len=edgeList.length;
   for(let i=0;i<len;i++){
      links1.push(edgeStyle([edgeList[i].source,edgeList[i].target],edgeList[i].value))
   }
   return links1;
}
//初始化数据
function initData(){
    nodes=[],links=[],option={},title="";
    matrix=[];
    selectNodeIndex=-1;
    visitedNode=[];  //已经访问过的顶点
    preNode=[];
    isFirst=true;
}
//由字母获取 下标  eulerianPathSet转 每一条边 逐步显示
function getIndex(letter){
  let nodeTitle=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
  let len=letter.length;
  let l=letter[0];
  let index=getArrayIndex(nodeTitle,l);
  return index+26*(len-1);
}
function getArrayIndex(arr, obj) {
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) {
            return i;
        }
    }
    return -1;
}

function showDijkstra(){
    console.log(matrix);
    let num=nodes.length;
    if(selectNodeIndex==-1){
        modalApp.modalAlert("未选择起点");return;
    }
    if(isFirst){
        //第一次点击
        modalApp.modalAlert("请继续点击 Dijkstra算法逐步显示!");
        isFirst=false;
        visitedNode.push(selectNodeIndex);
        for(let i=0;i<matrix[selectNodeIndex].length;i++){
            if(matrix[selectNodeIndex][i]!=100000) preNode[i]=selectNodeIndex;
        }
        updateNodeTitle();
        return;
    }
    if(visitedNode.length!=num){
        let minIndex=getArrMin(matrix[selectNodeIndex],visitedNode);
        if(minIndex==-1){
            modalApp.modalAlert("显示完毕");return;
        };
        visitedNode.push(minIndex);
        showLinksRed(minIndex,preNode[minIndex]);
        nodes[minIndex].itemStyle.color="#007bff";
        nodes[minIndex].itemStyle.borderColor="white";
        nodes[minIndex].label.color="white";
        //更新节点
        for(let i=0;i<num;i++){
            if(visitedNode.indexOf(i)==-1){
                let minK=matrix[selectNodeIndex][minIndex]+matrix[minIndex][i];
                if(matrix[minIndex][i]==100000) minK=100000;
                if(minK<matrix[selectNodeIndex][i]){
                    matrix[selectNodeIndex][i]=minK;
                    preNode[i]=minIndex;
                }
            }
        }
        updateNodeTitle();
    }
    else{
        modalApp.modalAlert("显示完毕");
    }
    console.log(matrix);
}
function updateNodeTitle(){
    for(let i=0;i<nodes.length;i++){
        if(selectNodeIndex!=i){
            let t='∞';
            if(matrix[selectNodeIndex][i]!=100000) t=matrix[selectNodeIndex][i];
            nodes[i].name=nodes[i].name.split('-')[0]+"-"+t;
        }
    }
    title="已访问到的节点:";
    for(let i=0;i<visitedNode.length;i++){
        console.log(visitedNode[i]);
        title+=getLetter(visitedNode[i])+" "
    }
    
    option.title.text=title;
    myChart.setOption(option);
}
function showLinksRed(index1,index2){
    let index=0;
    for(let i=0;i<links.length;i++){
        if((links[i].source==index1&&links[i].target==index2)||(links[i].source==index2&&links[i].target==index1))
        {
            index=i;
            break;
        }
    }
    option.series[0].links[index].lineStyle.color='red';
    option.series[0].links[index].lineStyle.width=10;
    myChart.setOption(option);
}
function getArrMin(arr,visitedNode){
    let min=100000,minIndex=-1;
    for(let i=0;i<arr.length;i++){
        if(arr[i]<min&&visitedNode.indexOf(i)==-1) 
        {
            min=arr[i];
            minIndex=i;
        }
    }
    return minIndex;
}
let myChart = echarts.init(document.getElementById('echartsDiv'));
let matrix=[]; //邻接矩阵 带权值
let graphItem=[]; //显示的样图数据
let nodes=[],links=[],option={},title="";  //显示图的点集和边集
let visitedNode=[];  //已经访问过的顶点
let preNode=[];
let isFirst=true;
let selectNodeIndex=-1; //Dijkstra算法选择起点
var app=new Vue({
    el: '#app',
    data: {
      exampleGraph:[
          {
              name:"样图1",
              imgUrl:"res/image/1.png"
          },
          {
              name:"样图2",
              imgUrl:"res/image/2.png"
          },
          {
              name:"样图3",
              imgUrl:"res/image/3.png"
          },
          {
              name:"样图4",
              imgUrl:"res/image/4.png"
          },
           {
              name:"样图5",
              imgUrl:"res/image/5.png"
          },
          {
              name:"样图6",
              imgUrl:"res/image/6.png"
          },
          {
              name:"样图7",
              imgUrl:"res/image/7.png"
          },
          {
              name:"样图8",
              imgUrl:"res/image/8.png"
          }
      ]
    },
    methods:{
        showGraph(index){
            initData();
            console.log(index);
            graphItem=exampleGraph[index];
            nodes=getNodes(graphItem.nodeNum,graphItem.nodeLocation);
            links=getLoadLinks();
            let jsonData={"nodes":nodes,"links":links,"title":title}
            option=getOption(jsonData);
            myChart.setOption(option);
        },
        algorithmRun(){
            //显示过程
            if(nodes.length>0)
            showDijkstra();
            else{
                modalApp.modalAlert('未选择图形');
            }
        },
        showNext(){
            showDijkstra();
        },
        resetProcess(){
            initData();
            nodes=getNodes(graphItem.nodeNum,graphItem.nodeLocation);
            links=getLoadLinks();
            let jsonData={"nodes":nodes,"links":links}
            option=getOption(jsonData);
            myChart.setOption(option);
        }
    }
})
var modalApp=new Vue({
    el:"#myModal1",
    data:{
        message:""
    },
    methods:{
        modalAlert(str){
            this.message=str;
            $('#myModal1').modal('toggle');
        }
    }
})
myChart.on('click', function (params) {
    console.log(params);
    if(params.dataType=='node'){
        if(selectNodeIndex==-1){
            selectNodeIndex=params.dataIndex;
            option.series[0].nodes[params.dataIndex].itemStyle.color="#007bff";
            option.series[0].nodes[params.dataIndex].itemStyle.borderColor="white";
            option.series[0].nodes[params.dataIndex].label.color='white';
        }
        else{
           if(selectNodeIndex==params.dataIndex){
               selectNodeIndex=-1;
               option.series[0].nodes[params.dataIndex].itemStyle.color="white";
               option.series[0].nodes[params.dataIndex].itemStyle.borderColor="black";
               option.series[0].nodes[params.dataIndex].label.color='black';
            }
           else{
               option.series[0].nodes[selectNodeIndex].itemStyle.color="white";
               option.series[0].nodes[selectNodeIndex].itemStyle.borderColor="black";
               option.series[0].nodes[selectNodeIndex].label.color='black';
               option.series[0].nodes[params.dataIndex].itemStyle.color="#007bff";
               option.series[0].nodes[params.dataIndex].itemStyle.borderColor="white";
               option.series[0].nodes[params.dataIndex].label.color='white';
               selectNodeIndex=params.dataIndex;

           }
        }
        console.log(selectNodeIndex);
        myChart.setOption(option);
    }         
});